<template>
<div class="add-datasource-wrapper addflowIndex">
    <div class="content-header m-b-10"> <!-- 页头部 -->
        <div class="pull-left">
            <ul class="hearder-state">
                <li class="title"><a @click="cancel">数据源</a>></li>
                <li class="">新增数据源</li>
            </ul>
        </div>
    </div>
    <Steps class="flow-step" :current="current" status="process" :style="'padding-left:' + stepPaddingLeft">
        <Step v-for="(step, stepIndex) in steps" :key="stepIndex" :title="step.title" :content="step.content" :icon="'fa ' + step.icon"></Step>
    </Steps>
    <div class="addflowIndex-content m-t-15">
        <keep-alive exclude="AddDatasourceTable">
            <component ref="compt" :is="comptName" :datasource="datasource" @next="next"></component>
        </keep-alive>
    </div>
    <div class="flow-btn text-center">
        <Button @click="previous" :disabled="current < 1">上一步</Button>
        <Button type="primary" @click="onNextClick">{{nextBtnText}}</Button>
        <Button type="warning" @click="cancel">取消</Button>
    </div>
</div>
</template>

<script>
import getData from 'getData'

import AddDatasourceConnect from './add-datasource-connect'
import AddDatasourceType from './add-datasource-type'
import AddDatasourceFile from './add-datasource-file'
import AddDatasourceTable from './add-datasource-table'

export default {
    components: {
        AddDatasourceTable,
        AddDatasourceType,
        AddDatasourceFile,
        AddDatasourceConnect
    },

    data () {
        return {
            current: 0,
            datasource: {
                datasourceType: ''
            },
            stepPaddingLeft: '160px'
        }
    },

    computed: {
        steps() {
            if (this.datasource.datasourceType == '') {
                this.stepPaddingLeft = '388px';
                return [
                    {
                        title: '第一步',
                        content: '选择类型',
                        icon: 'zlstbd-icon-setting',
                        comptName: 'AddDatasourceType'
                    }
                ];
            } else if (this.datasource.datasourceType == 'file') {
                this.stepPaddingLeft = '256px';
                return [
                    {
                        title: '第一步',
                        content: '选择类型',
                        icon: 'zlstbd-icon-setting',
                        comptName: 'AddDatasourceType'
                    },
                    {
                        title: '第二步',
                        content: '上传文件',
                        icon: 'zlstbd-icon-file-upload',
                        comptName: 'AddDatasourceFile'
                    }
                ];
            } else {
                this.stepPaddingLeft = '160px';
                return [
                    {
                        title: '第一步',
                        content: '选择类型',
                        icon: 'zlstbd-icon-setting',
                        comptName: 'AddDatasourceType'
                    },
                    {
                        title: '第二步',
                        content: '连接配置',
                        icon: 'zlstbd-icon-dispatch',
                        comptName: 'AddDatasourceConnect'
                    },
                    {
                        title: '第三步',
                        content: '选择数据表',
                        icon: 'zlstbd-icon-database',
                        comptName: 'AddDatasourceTable'
                    },
                ];
            }
        },

        nextBtnText() {
            if (this.current == (this.steps.length -1)) {
                return '保存';
            } else {
                return '下一步';
            }
        },

        comptName() {
            return this.steps[this.current].comptName;
        },
    },

    methods: {
        onNextClick() {
            this.$refs.compt.next();
        },
        next() {
            if (this.current == (this.steps.length - 1)) {
                this.$emit('hide', true);
                this.$destroy();
            } else {
                this.current ++;
            }
        },
        cancel() {
            this.$Modal.confirm({
                title: '取消新增',
                content: '确定取消新增操作？',
                onOk: ()=> {
                    this.$emit('hide');
                }
            })
        },
        previous() {
            this.current --;
        },
    }
}
</script>

<style lang="less">

</style>
